<template>
	<view class="content-card-v2T" @click="toCourseInfo(item)">
		<view class="cont-card-top">
			<image :src="item.courseImg" mode=""></image>
			<view class="cont-card-top-right">
				<h5 class="title"> {{ item.courseName }} </h5>
				<view class="cont-card-text">
					{{ item.courseSynopsis }}
				</view>
			</view>
		</view>
		<view class="cont-card-bottom">
			<text> 教师：{{ item.realName }}</text>
			<view class="already-study">
				已学：<text :class="item.pace<60?'study-pace':'study-pace study-pace-color'"> 
					{{ (item.pace&&item.pace.toFixed(2)) || 0 }}% 
				</text>
			</view>
		</view>
		<image class="cardCoverImg" :src="item.courseCover" mode=""></image>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type: Object,
			}
		},
		data() {
			return {}
		},
		methods: {
			toCourseInfo(e){
				this.$emit('goDetail',e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-card-v2T{
		width: 100%;
		box-sizing: border-box;
		height: 260rpx;
		margin: 25rpx auto;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		// background-color: #FF9F5F;
		position: relative;
		border: 1rpx solid #eee;
		padding-bottom: 10rpx;
		z-index: 2;
		.cont-card-top{
			display: flex;
			image{
				width: 140rpx;
				height: 140rpx;
				background: #000000;
				border-radius: 10rpx;
				margin-right: 30rpx;
			}
			.title{
				height: 29rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #111111;
				line-height: 44rpx;
				margin-bottom: 30rpx;
			}
			.cont-card-text{
				width: 440rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #585858;
				line-height: 44rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.cont-card-bottom{
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			line-height: 54rpx;
			font-size: 26rpx;
			.already-study{
				min-width: 174rpx;
				height: 54rpx;
				background: #FFFFFF;
				box-shadow: 0 3rpx 7rpx 0 rgba(50,92,110,0.12);
				opacity: 0.8;
				border-radius: 14rpx;
				padding: 2rpx 14rpx;
				font-size: 28rpx;
				font-weight: bold;
				text{
					color: #FF9F5F;
					font-weight: 500;
				}
				.textGreen{
					color: green;
				}
				.study-pace-color{
					color: #25B74B;
				}
				
			}
		}
		.cardCoverImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			border-radius: 20rpx;
			opacity: .5;
			box-shadow: 0 0 4rpx #194FC9;
		}
	}
</style>
